<template>
  <div>
    <div class="title-box">
      <div class="title-icon"></div>
      <p class="title-name">{{ props.titleName }}</p>
      <slot></slot>
    </div>
    <!-- <div class="bottom-line">
      <div class="left-line"></div>
      <div class="right-line"></div>
    </div> -->
  </div>
</template>

<script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
    titleName: {
      type: String,
      default: ''
    }
  })
</script>
<style scoped lang="scss">
  .title-box {
    height: pxTvh(28);
    width: 100%;
    // background: linear-gradient(270deg, rgba(34, 48, 84, 0) 0%, #314576 100%);
    display: flex;
    align-items: center;
    margin-bottom: pxTvh(16);
    & > .title-icon {
      width: pxTvw(4);
      height: pxTvh(13);
      background: #3174ff;
      // margin-left: pxTvw(9);
    }
    & > .title-name {
      @include computed_font(14);
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #dceaff;
      margin-left: pxTvw(7);
    }
  }
  // .bottom-line {
  //   height: pxTvw(1);
  //   display: flex;
  //   & > .left-line {
  //     height: 100%;
  //     background: rgba(106, 145, 227, 0.3);
  //     width: 98%;
  //   }
  //   & > .right-line {
  //     height: 100%;
  //     background: #3174ff;
  //     width: 2%;
  //   }
  // }
</style>
